<template>
  <div class="record">
    <div class="all-box">
      <p class="title">Today's Website Traffic : </p>
      <p class="today">{{ todayNum }}</p>
    </div>
    <div class="today-box">
      <p class="title">Total Website Visits : </p>
      <p class="all">{{ allNum }}</p>
    </div>
  </div>
</template>

<script setup>
import axios from "axios"
import { onMounted } from "vue"

let allNum = '请求中...'
let todayNum = '请求中...'

async function mount () {
  // 获取dom
  let todayDom = document.getElementsByClassName('today')[0]
  let allDom = document.getElementsByClassName('all')[0]
  // 获取数据
  let todayRes = await axios.get('/message/today').catch(err => {
    todayNum = '网站出了点小意外 🤢';
  })
  if (todayRes) {
    todayNum = todayRes.data.data.results
  }
  let allRes = await axios.get('/message/all').catch(err => {
    allNum = '网站出了点小意外 🤢';
  })
  if (allRes) {
    allNum = allRes.data.data.results
  }
  // 设置
  todayDom && (todayDom.innerHTML = todayNum)
  allDom && (allDom.innerHTML = allNum)
}

onMounted(mount)
</script>

<style>
.record {
  width: 100%;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
  white-space: nowrap;
  position: absolute;
  bottom: -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.all-box,
.today-box {
  display: flex;
  align-items: center;
  padding-top: 4px;
}
.today-box {
  padding-left: 64px;
}
.title {
  font-weight: bold;
  white-space: pre;
}
</style>